<template>
    <view>
        <view class="tabs">
            <tabs type="capsule" :items="items" :defaultCurrent="1" />
        </view>

        <view class="box">
            <block v-for="(item, index) in message" :key="index">
                <view class="item">
                    <image :src="item.image" class="item-image"></image>
                    <view class="item-info">
                        <text class="item-title">{{ item.name }}</text>
                        <view class="item-details">
                            <text class="duration">{{ item.time }}</text>
                            <text class="type">{{ item.type }}</text>
                            <text class="ticket-type">{{ item.lei }}</text>
                        </view>
                        <text class="location">{{ item.address }}</text>
                    </view>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		onPullDownRefresh,
		onReachBottom
	} from "@dcloudio/uni-app";

export default {
    components: {
    
    },
    data() {
        return {
            current: 0,
            createTime: '',
            fabuid: 0,
            favorid: 0,
            idShoucang: 0,
            openID: '',
            updateTime: '',
            jingdian: [],
            items: [
                {
                    title: '游玩项目',
                    subTitle: '描述文案',
                    content: '西瓜'
                },
                {
                    title: '游玩攻略',
                    subTitle: '描述文案',
                    badge: true,
                    content: '西红柿'
                },
                {
                    title: '游玩带货',
                    subTitle: '描述文案',
                    content: '蚂蚁'
                },
                {
                    title: '精选套餐',
                    subTitle: '描述文案',
                    content: '蚂蚁'
                }
            ],
            message: [
                {
                    name: '环鼓浪屿夜游 环鼓浪屿夜游/儿童优惠票',
                    time: '1.5小时',
                    type: '游艇',
                    lei: '单票',
                    address: '厦门和平码头',
                    image: 'https://pic.imgdb.cn/item/669ccfb8d9c307b7e9932100.png'
                },
                {
                    name: '厦门园林植物园',
                    time: '7小时',
                    type: '景点',
                    lei: '单票',
                    address: '思明区虎园路25号',
                    image: 'https://pic.imgdb.cn/item/669ccfe2d9c307b7e99345de.png'
                }
            ]
        };
    },
    onLoad() {
        uni.request({
            url: url + '/searchGoods',
            method: 'POST',
            data: {},
            headers: {
                'content-type': 'application/json'
            },
            dataType: 'json',
            success: (res) => {
                if (res.data.data) {
                    console.log(res.data);
                    this.setData({
                        jingdian: res.data.data
                    });
                }
            },
            fail: (error) => {
                console.error('Request failed', error);
            }
        });
    },
    methods: {}
};
</script>
<style>
.tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}
.tab {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
}

.item {
    display: flex;
    margin-bottom: 20px;
}
.item-image {
    width: 100px;
    height: 100px;
    margin-right: 10px;
}
.item-info {
    flex: 1;
}
.item-title {
    font-size: 16px;
    font-weight: bold;
}
.item-details {
    display: flex;
    margin-top: 5px;
}
.duration,
.type,
.ticket-type {
    margin-right: 10px;
    color: #ee3a49;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.location {
    display: flex;
    margin-top: 10px;
    color: #888;
}
.content {
    color: red;
    padding: 12px;
}
.box {
    widows: 100%;
    flex: 1;
    padding: 10px;
}

</style>
